import React, { memo,Component } from 'react'
import { Image,Avatar,Button,Input,Select,Table, message, Modal  } from 'antd';
import './index.less'
import {baseUrl} from '../../assets/baseUrl'
import { StudentInfo } from '../../utils/model';
import {getClassmateList,removePerson,sendEmail} from '@/api/index'
import {formatDate} from '../../utils/tool'
const BaseUrl = baseUrl()
const { TextArea } = Input;
class ClassInfo extends Component{
    static contextType = StudentInfo
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [], //表格数据
            pageSize:10,
            pageNum:1,
            total:0
        }
    }
    componentDidMount(){
        this.getList()
    }

    getList=()=>{
        const {pageNum,pageSize} = this.state
        getClassmateList({pageNum,pageSize}).then(res=>{
            this.setState({
                dataSource: res.data.list,
                total:res.data.pagination.total,
                level:this.context?.studentInfo?.level,
            })
        })
    }
    // goToMailDetail=(row)=>{
    //     console.log(this.props);
    //     this.props.history.replace(`/home/myCenter/emailDetail?mailId=${row.mailId}`)
    // }
    removePerson=(e)=>{
        console.log(e);
        Modal.confirm({
            title: `确认将用户${e.nickName}移出班级？`,
            onOk: () => {
                removePerson({personId:e.studentId}).then(res=>{
                    if(res.data.code == 400){
                        message.error(res.data.message)
                    }
                    else {
                        message.success(res.data.message)
                        this.getList()
                        sendEmail({content:`您已被移出${e.className}，请重新选择班级哦～`,title:'系统通知',studentId:e.studentId})
                    }
                })
            },
            okText: '移出',
            cancelText: '取消',
            onCancel: () => {}
          })
        
    }

    render(){
        const {dataSource,level,pageNum,pageSize,total} = this.state
        const pagination = {
            current: pageNum,
            pageSize,
            onChange: (e) => {
              this.setState(
                {
                  pageNum: e
                },
                () => {
                  this.getList()
                }
              )
            },
            total: this.state.total
          }
        const columnsPlus = [
            {
                title: '昵称',
                dataIndex: 'nickName',
                align:'center',
                key: 'nickName',
            },
            {
                title: 'UID',
                dataIndex: 'studentId',
                align:'center',
                key: 'studentId',
            },
            {
                title: '号码',
                dataIndex: 'telephone',
                align:'center',
                key: 'telephone',
            },
            {
                title: 'QQ号',
                dataIndex: 'QQnumber',
                align:'center',
                key: 'QQnumber',
                render:(item)=>{
                    return item ? <div style={{color:'green'}}>{item}</div> : <div style={{color:'red'}}>未绑定QQ</div>
                }
            },
            {
                title: '实名认证',
                dataIndex: 'realName',
                align:'center',
                key: 'realName',
                render:(item)=>{
                    return item ? <div style={{color:'green'}}>{item}</div> : <div style={{color:'red'}}>未实名</div>
                }
            },
            {
                title: '操作',
                align:'center',
                key: 'hasread',
                render:(item,row)=>{
                    return <div style={{cursor:'pointer',color:'red'}} onClick={this.removePerson.bind(this,row)}>移出班级</div>
                }
            }
        ];   
        const columns = [
            {
                title: '昵称',
                dataIndex: 'nickName',
                align:'center',
                key: 'nickName',
            },
            {
                title: 'UID',
                dataIndex: 'studentId',
                align:'center',
                key: 'studentId',
            },
            {
                title: '号码',
                dataIndex: 'telephone',
                align:'center',
                key: 'telephone',
            },
            {
                title: 'QQ号',
                dataIndex: 'QQnumber',
                align:'center',
                key: 'QQnumber',
                render:(item)=>{
                    return item ? <div style={{color:'green'}}>{item}</div> : <div style={{color:'red'}}>未绑定QQ</div>
                }
            },
            {
                title: '实名认证',
                dataIndex: 'realName',
                align:'center',
                key: 'realName',
                render:(item)=>{
                    return item ? <div style={{color:'green'}}>{item}</div> : <div style={{color:'red'}}>未实名</div>
                }
            }
        ];  
        return (
            <div className='myEail-all-box'>
                <Table dataSource={dataSource} columns={level == 10 ? columnsPlus : columns} pagination={pagination}/>
            </div>
        )
    }
}
export default memo(ClassInfo)